<template>
  <div class="GroupList">
    <div class="search">
      <el-input placeholder="请输入内容" v-model="groupID">
        <template slot="prepend">主播ID</template>
      </el-input>
      <el-input placeholder="请输入内容" v-model="groupName">
        <template slot="prepend">小组名</template>
      </el-input>
      <el-button @click="search">查询</el-button>
      <el-button @click="group">小组管理</el-button>
      <!-- <el-button>导出Excel</el-button> -->
    </div>
    <!-- 表格 -->
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.list" style="width: 100%">
              <el-table-column prop="id_code" label="ID"> </el-table-column>
              <el-table-column prop="headimg" label="头像">
                <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.headimg"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="nickName" label="账号昵称">
              </el-table-column>
              <el-table-column prop="valid_call_time" label="有效通话时间">
              </el-table-column>
              <el-table-column prop="total_income" label="总收入流水">
              </el-table-column>
              <el-table-column prop="total_pay" label="总消耗流水">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="details(scope.row)">详情</el-button>
                  <el-button @click="reverseGroup(scope.row)">换组</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="group_name" label="组名"> </el-table-column>
        <el-table-column prop="number" label="人数"> </el-table-column>
        <el-table-column prop="total_income" label="总收入流水">
        </el-table-column>
        <el-table-column prop="total_pay" label="总消耗流水"> </el-table-column>
      </el-table>
    </el-card>

    <!-- 小组管理弹出框 -->
    <el-dialog title="小组管理" :visible.sync="dialogFormVisible" width="35%">
      <el-table :data="tableDatas">
        <el-table-column prop="group_name" align="center">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入组名"
              v-model="scope.row.group_name"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button @click="delGroup(scope.row)">删除</el-button>
            <el-button @click="checkGroup(scope.row)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn" style="margin: 15px">
        <el-button @click="addGroup">新增分组</el-button>
        <el-button @click="reverse">确定</el-button>
      </div>
    </el-dialog>
    <!-- 换组弹出框 -->
    <el-dialog title="成员换组" :visible.sync="dialogFormVisible1" width="30%">
      <el-form :model="form">
        <el-form-item label="ID" :label-width="formLabelWidth">
          <el-input disabled v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input
            disabled
            v-model="form.nickName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前分组" :label-width="formLabelWidth">
          <el-input
            disabled
            v-model="form.groupNow"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="更换分组" :label-width="formLabelWidth">
          <el-select v-model="form.groupCheck" placeholder="请选择分组">
            <el-option
              v-for="(item, index) in groupList"
              :key="index"
              :label="item.group_name"
              :value="item.group_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  groupList_api,
  addGroup_api,
  group_api,
  delGroup_api,
  checkGroup_api,
  personGroup_api,
} from "@/api/union";
export default {
  data() {
    return {
      groupID: "", //主播ID
      groupName: "", //小组名
      tableData: [], //表格
      loading: false,
      tableData1: [], //二级表格，假数据，实际在tableData的子数据中
      loading1: false, //二级表格加载
      dialogFormVisible: false, // 小组管理弹框
      dialogFormVisible1: false, //成员分组弹框
      formLabelWidth: "100px",
      // 换组表单
      form: {
        id: "",
        nickName: "",
        groupNow: "",
        groupCheck: "",
      },
      obj: {},
      tableDatas: [],
      groupList: [],
    };
  },
  created() {
    this.obj = JSON.parse(localStorage.getItem("unionId"));
    this.getGroupList();
  },
  methods: {
    // 获取列表
    async getGroupList() {
      this.loading = true;
      let { code, data } = await groupList_api({
        union_id: this.obj.id,
        id_code: this.groupID,
        group_name: this.groupName,
      });
      if (code == 0) {
        this.tableData = data.list;
        this.groupList = data.list;
        this.tableData.forEach((item, index) => {
          item.list.forEach((val) => {
            val.groupName = item.group_name;
          });
        });
        this.loading = false;
        console.log(data, "366");
      }
    },
    // 小组管理
    async group() {
      let { code, data } = await group_api({
        union_id: this.obj.id,
      });
      if (code == 0) {
        console.log(data, "666");
        this.tableDatas = data.list;
      }
      this.dialogFormVisible = true;
    },
    // 换组
    reverseGroup(row) {
      console.log(row);
      this.form.id = row.id_code;
      this.form.nickName = row.nickName;
      this.form.groupNow = row.groupName;
      this.dialogFormVisible1 = true;
    },
    // 新增分组
    addGroup() {
      this.tableDatas.push({
        group_name: "",
      });
    },
    // 确定分组
    async reverse() {
      let { code, data } = await addGroup_api({
        union_id: this.obj.id,
        group_name: this.tableDatas[this.tableDatas.length - 1].group_name,
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "增加成功!",
        });
        this.group();
      }
    },
    // 删除分组
    delGroup(row) {
      // console.log(row);
      this.$confirm("此操作将删除该条信息，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delGroup_api({
            union_id: this.obj.id,
            id: row.id,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 渲染视图
              this.group();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    async checkGroup(row) {
      let { code, data } = await checkGroup_api({
        union_id: this.obj.id,
        id: row.id,
        group_name: row.group_name,
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "更新成功!",
        });
        this.group();
      }
    },
    // 成员换组确认按钮
    async submit() {
      let { code, data } = await personGroup_api({
        union_id: this.obj.id,
        group_id: this.form.groupCheck,
        user_id: this.form.id,
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "绑定成功!",
        });
        this.dialogFormVisible1 = false;
        this.getGroupList();
      }
    },
    search() {
      this.getGroupList();
    },
    details(row) {
      this.$router.push({
        path: "/anchorDetails",
        query: {
          id: row.id_code,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.GroupList {
  margin: 30px;
  height: 100%;
  .search {
    display: flex;
    margin-bottom: 30px;
    /deep/.el-input {
      width: 300px;
      margin-left: 30px;
    }
    /deep/.el-button {
      margin-left: 30px;
    }
  }
}
</style>